import React, { Component } from "react";
import { Form, Input, Button, DatePicker, Select, Cascader, Tag } from "antd";
import { dateFormat } from "../../utils/index";
import { finddoctorAjax, Addfront } from "../../utils/api";
export const areas = [
  {
    title: "妇科",
    value: "妇科",
  },
  {
    title: "儿科",
    value: "儿科",
  },
  {
    title: "助产科",
    value: "助产科",
  },
  {
    title: "急诊科",
    value: "急诊科",
  },
  {
    title: "精神科",
    value: "精神科",
  },
];
export const sex = [
  {
    title: "男",
    value: "男",
  },
  {
    title: "女",
    value: "女",
  },
];
const options = [
  {
    value: "妇科",
    label: "妇科",
  },
  {
    value: "儿科",
    label: "儿科",
  },
  {
    value: "助产科",
    label: "助产科",
  },
  {
    value: "急诊科",
    label: "急诊科",
  },
  {
    value: "精神科",
    label: "精神科",
  },
];
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const validateMessages = {
  required: "${label} 为必填项!",
  types: {
    age: "${label} is not validate age!",
    number: "${label} is not a validate number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};

export default class Guahao extends Component {
  handleOk = () => {
    this.addForm.resetFields();
    this.setState({
      clickvis: false,
    });
  };
  state = {
    thisOptions: null,
    flag: false,
    clickvis: false,
  };
  onChange = (value) => {
    finddoctorAjax({ work: value[0] }).then((res) => {
      let lists = res.result;
      if (lists) {
        if (!lists.length == 0) {
          this.setState({
            thisOptions: lists.map((item, index) => {
              return { value: item.username, label: item.username };
            }),
            flag: true,
          });
        } else {
          this.setState({
            thisOptions: null,
            flag: false,
          });
        }
      } else {
        this.props.history.push('/login');
      }
    });
  };
  onvic = () => {
    this.setState({
      clickvis: true,
    });
  };
  cancel = () => {
    this.setState({
      clickvis: false,
    });
  };
  render() {
    const { thisOptions, flag, clickvis } = this.state;
    const onFinish = (values) => {
      // 插入数据
      let dates = dateFormat(values.date);
      values.date = dates;
      values.flag = false;
      values.work = this.work.state.value[0];
      values.state = 1
      values.anliu  = true
      values.doctorname = this.doctorname.state.value[0];
      if (clickvis) {
        values.anxious = 1;
        Addfront(values).then((res) => {
          this.addForm.resetFields();
        });
      } else {
        values.anxious = 2;
        Addfront(values).then((res) => {
          this.addForm.resetFields();
        });
      }
    };
    return (
      <Form
        {...layout}
        onFinish={onFinish}
        validateMessages={validateMessages}
        name="addForm"
        ref={(el) => (this.addForm = el)}
        style={{ width: "200px" }}
      >
        {clickvis && (
          <Form.Item name="anxious">
            <Tag color="red" visible={clickvis}>
              急诊患者
            </Tag>
          </Form.Item>
        )}
        <Form.Item name="name" label="姓名">
          <Input style={{ width: "400px" }} />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <Input style={{ width: "400px" }} />
        </Form.Item>
        <Form.Item name="papers" label="身份证件">
          <Input style={{ width: "400px" }} />
        </Form.Item>
        <Form.Item
          name="phone"
          label="联系方式"
          rules={[{ type: "string", min: 0, max: 99 }]}
        >
          <Input style={{ width: "400px" }} />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Select placeholder="请选择性别">
            {sex.map((item, i) => {
              return (
                <Select.Option value={item.value} key={i}>
                  {" "}
                  {item.title}{" "}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item name="options" label="科室">
          <Cascader
            style={{ width: "180px" }}
            options={options}
            onChange={this.onChange}
            name="work"
            ref={(el) => (this.work = el)}
            placeholder="请选择科室"
          />
          {flag && (
            <Cascader
              style={{ width: "180px" }}
              options={thisOptions}
              name="doctorname"
              ref={(el) => (this.doctorname = el)}
              placeholder="请选择医生"
            />
          )}
        </Form.Item>

        <Form.Item name="date" label="挂号时间" {...layout}>
          <DatePicker />
        </Form.Item>
        <Form.Item
          wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
          style={{ width: "350px" }}
        ></Form.Item>
        <Form.Item
          wrapperCol={{ ...layout.wrapperCol, offset: 8 }}
          style={{ width: "350px" }}
        >
          <Button type="primary" htmlType="submit">
            挂号
          </Button>

          <Button
            onClick={() => {
              this.handleOk();
            }}
          >
            重置
          </Button>

          {!clickvis && (
            <Button
              type="primary"
              danger
              onClick={() => {
                this.onvic();
              }}
            >
              添加急诊
            </Button>
          )}
          {clickvis && (
            <Button
              type="primary"
              onClick={() => {
                this.cancel();
              }}
            >
              取消急诊
            </Button>
          )}
        </Form.Item>
      </Form>
    );
  }
}
